<template>
<el-container>
    <el-header height="30%">
        <div style="border-radius: 4px;padding-top: 25px !important;" class="page-container">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-col :span="5">
                        <div class="grid-content" style="text-align:right">
                            <label>商家</label>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content" style="text-align:left;width:100%">
                            <el-input size="mini" clearable placeholder="请输入商家" maxlength="80" clearable v-model="searchFilters.deptName"></el-input>
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="8">
                    <el-col :span="5">
                        <div class="grid-content" style="text-align:right;">
                            <label>店铺名称</label>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content" style="text-align:left;width:100%">
                            <el-input size="mini" clearable placeholder="请输入店铺名称" maxlength="80" clearable v-model="searchFilters.storeName"></el-input>
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="8">
                    <el-col :span="5">
                        <div class="grid-content" style="text-align:right">
                            <label>供应商</label>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content" style="text-align:left;width:100%">
                            <el-input size="mini" clearable placeholder="请输入供应商" maxlength="80" clearable v-model="searchFilters.supplierName"></el-input>
                        </div>
                    </el-col>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="8">
                    <el-col :span="5">
                        <div class="grid-content" style="text-align:right">
                            <label>采购单号</label>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content" style="text-align:left;width:100%">
                            <el-input size="mini" clearable placeholder="请输入采购单号" maxlength="80" clearable v-model="searchFilters.code"></el-input>
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="8">
                    <el-col :span="5">
                        <div class="grid-content" style="text-align:right">
                            <label>交易币别</label>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content" style="text-align:left;width:100%">
                            <el-select placeholder="请选择" maxlength="80" clearable v-model="searchFilters.transactionCurrency" size="mini" style="width:100%">
                                <el-option label="CNY" :value="0"></el-option>
                                <el-option label="AUD" :value="1"></el-option>
                                <el-option label="USD" :value="2"></el-option>
                                <el-option label="GBP" :value="2"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="8">
                    <el-col :span="5">
                        <div class="grid-content" style="text-align:right">
                            <label>收货方式</label>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content" style="text-align:left;width:100%">
                            <el-select placeholder="请选择" clearable v-model="searchFilters.receiveMethod" size="mini" style="width:100%">
                                <el-option label="接受-入库" :value="0"></el-option>
                                <el-option label="直接-入库" :value="1"></el-option>
                                <el-option label="接受-检验-入库" :value="2"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-col>
            </el-row>
            <el-row class="t_r">
                <div style="text-align:right;">
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                    <kt-button label="重置" type="primary" @click="resetSearchFilters()" />
                    <kt-button label="导出" type="primary" @click="exInfo" />
                </div>
            </el-row>
        </div>
        <!--样式优化时注释，后期需要时放开-->
        <!-- <div class="tab-container">
        <el-alert
          :closable="false"
          style="background-color: #ffffff;color: #ffffff;"
          title
          type="success"
        />
        <el-tabs v-model="activeNames" style="margin-top:15px;" type="border-card">
          <el-tab-pane
            v-for="item in tabMapOptions"
            :key="item.key"
            :label="item.label"
            :name="item.key"
          >
            <keep-alive>
              <tab-pane v-if="activeNames==item.key" :type="item.key" />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </div>-->
    </el-header>
    <el-main>
        <div>
            <el-tabs>
                <div class="search-button mb20 noboder">
                    <kt-button label="新增采购单" type="primary" @click="addOrder" />
                </div>
                <el-tab-pane label="全部">
                    <div>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库"></el-table-column>
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                            <el-table-column label="操作" align="center" min-width="100">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status!=5" type="primary" @click="recive(scope.row)">收货</el-button>
                                    <el-button v-if="scope.row.status!=4&&scope.row.status!=5" type="success" @click="send(scope.row)">发货</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待提交">
                    <div>
                        <el-table :data="tableData1" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待审核">
                    <div>
                        <el-table :data="tableData2" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <!-- <el-table-column prop="tradeCurrency" label="交易币别"></el-table-column>
                <el-table-column prop="exchangeRate" label="汇率"></el-table-column>
                <el-table-column prop="amountWithTax" label="含税金额"></el-table-column> -->
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已审核">
                    <div>
                        <el-table :data="tableData3" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <!-- <el-table-column prop="tradeCurrency" label="交易币别"></el-table-column>
                <el-table-column prop="exchangeRate" label="汇率"></el-table-column>
                <el-table-column prop="amountWithTax" label="含税金额"></el-table-column> -->
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="审核拒绝">
                    <div>
                        <el-table :data="tableData4" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <!-- <el-table-column prop="tradeCurrency" label="交易币别"></el-table-column>
                <el-table-column prop="exchangeRate" label="汇率"></el-table-column>
                <el-table-column prop="amountWithTax" label="含税金额"></el-table-column> -->
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已结案">
                    <div>
                        <el-table :data="tableData5" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <!-- <el-table-column prop="tradeCurrency" label="交易币别"></el-table-column>
                <el-table-column prop="exchangeRate" label="汇率"></el-table-column>
                <el-table-column prop="amountWithTax" label="含税金额"></el-table-column> -->
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已过期">
                    <div>
                        <el-table :data="tableData6" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <!-- <el-table-column prop="tradeCurrency" label="交易币别"></el-table-column>
                <el-table-column prop="exchangeRate" label="汇率"></el-table-column>
                <el-table-column prop="amountWithTax" label="含税金额"></el-table-column> -->
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已作废">
                    <div>
                        <el-table :data="tableData7" border style="width: 100%">
                            <el-table-column prop="checks" type="selection"></el-table-column>
                            <el-table-column prop="code" label="采购单号"></el-table-column>

                            <el-table-column prop="deptName" label="商家名称"></el-table-column>
                            <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                            <el-table-column prop="supplierGlnCode" label="供应商助记码"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>

                            <el-table-column prop="storeName" label="收货仓库	"></el-table-column>
                            <!-- <el-table-column prop="tradeCurrency" label="交易币别"></el-table-column>
                <el-table-column prop="exchangeRate" label="汇率"></el-table-column>
                <el-table-column prop="amountWithTax" label="含税金额"></el-table-column> -->
                            <el-table-column prop="purchaseUserName" label="采购员"></el-table-column>
                            <el-table-column prop="fulfillStatus" label="采购履行状态">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.fulfillStatus=='1'">未履行</span>
                                    <span v-if="scope.row.fulfillStatus=='2'">部分履行</span>
                                    <span v-if="scope.row.fulfillStatus=='3'">完全履行</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fromType" label="来源类型		"></el-table-column>
                            <el-table-column prop="deliveryCode" label="要货单号"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"></el-table-column>
                            <el-table-column prop="creater" label="制单人员"></el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-main>
    <el-row style="text-align:center">
        <kt-button label="打印" type="primary" @click="print" />
    </el-row>

    <!-- 选择商家 -->
    <el-dialog title="选择商家" :visible.sync="shopsModel" width="45%" height="100%" label-width="80px" label-position="right">
        <el-form style="text-align:left" label-width="80px" label-position="right">
            <el-row>
                <div style="text-align:center">
                    <el-form-item label="商家编码" style="float:left;margin-left:90px">
                        <el-input auto-complete="off" width="20%"></el-input>
                    </el-form-item>

                    <el-form-item label="商家名称" style="float:left;margin-left:90px">
                        <el-input auto-complete="off" width="20%"></el-input>
                    </el-form-item>
                </div>
            </el-row>

            <div style="text-align:center">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                    <kt-button label="重置" type="primary" />
                </el-form-item>
            </div>

            <el-table :data="shopTable" border style="width: 100%" :visible.sync="shopsTable">
                <el-table-column prop="number" label="商家编码"></el-table-column>
                <el-table-column prop="name" label="商家名称" width="280"></el-table-column>
                <el-table-column prop="type" label="商家类型"></el-table-column>
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right">
            <el-button @click="cancels2">取 消</el-button>
        </div>
    </el-dialog>

    <!-- 选择店铺 -->
    <el-dialog title="选择店铺" :visible.sync="showModel" width="45%" height="100%" label-width="80px" label-position="right">
        <el-form style="text-align:left" label-width="80px" label-position="right">
            <el-row>
                <div style="text-align:center">
                    <el-form-item label="店铺名称" style="float:left;margin-left:90px">
                        <el-input auto-complete="off" width="20%"></el-input>
                    </el-form-item>

                    <el-form-item label="店铺编码" style="float:left;margin-left:90px">
                        <el-input auto-complete="off" width="20%"></el-input>
                    </el-form-item>
                </div>
            </el-row>

            <div style="text-align:center">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                    <kt-button label="重置" type="primary" />
                </el-form-item>
            </div>

            <el-table :data="shopTable" border style="width: 100%" :visible.sync="showTable">
                <el-table-column prop="checks" type="selection"></el-table-column>
                <el-table-column prop="name" label="商家名称" width="280"></el-table-column>
                <el-table-column prop="number" label="店铺编码" width="280"></el-table-column>
                <el-table-column prop="shopname" label="店铺名称"></el-table-column>
                <el-table-column prop="type" label="店铺类型"></el-table-column>
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right">
            <el-button @click="cancels">取 消</el-button>
        </div>
    </el-dialog>

    <!-- 选择供应商 -->

    <el-dialog title="供应商" :visible.sync="showModel1" width="45%" height="100%" label-width="80px" label-position="right">
        <el-form style="text-align:left" label-width="80px" label-position="right">
            <el-row>
                <div style="text-align:center">
                    <el-form-item label="供应商编码" style="float:left;margin-left:90px">
                        <el-input auto-complete="off" width="20%"></el-input>
                    </el-form-item>

                    <el-form-item label="供应商名称" style="float:left;margin-left:90px">
                        <el-input auto-complete="off" width="20%"></el-input>
                    </el-form-item>
                </div>
            </el-row>

            <div style="text-align:center">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                    <kt-button label="重置" type="primary" />
                </el-form-item>
            </div>

            <el-table :data="shopWarehouse" border style="width: 100%" :visible.sync="showTable1">
                <el-table-column prop="checks" type="selection"></el-table-column>
                <el-table-column prop="number" label="供应商编码" width="340"></el-table-column>
                <el-table-column prop="name" label="供应商名称"></el-table-column>
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right">
            <el-button @click="cancels1">取 消</el-button>
        </div>
    </el-dialog>
</el-container>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
export default {
    components: {
        CyTable,
        KtButton
    },
    data() {
        return {
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            tableData5: [],
            tableData6: [],
            tableData7: [],
            //===== 公共数据初始化 =====
            pageIndex: 0, //当前页数：首页；
            pageSize: 10, //每页记录数：10条记录；
            totalSize: 0, //总记录数：返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: "mini",

            //=====搜索表单对应的数据对象初始化=====
            searchFilters: {
                deptName: null,
                storeName: null,
                supplierName: null,
                code: null,
                transactionCurrency: null,
                receiveMethod: null
            },

            buttonFlag: true, //true代表商家 false代表供应商
            activeNames: "0",
            showModel: false,
            showTable: false,
            showModel1: false,
            showTable1: false,
            shopsModel: false,
            shopsTable: false,
            activeName: "activeName",
            tableLog: [],
            tableData: [],

            shopTable: [{
                    checks: "",
                    name: "张小二服饰",
                    number: "jd_001	",
                    shopname: "京东店	",
                    type: "线上店铺"
                },
                {
                    checks: "",
                    name: "张小二服饰",
                    number: "tm_001	",
                    shopname: "育学园天猫旗舰店（正式）	",
                    type: "线上店铺"
                }
            ],

            shopsTable: [{
                number: "001",
                name: "张小二服饰",
                type: "自营商家"
            }],

            shopWarehouse: [{
                    checks: "",
                    number: "1912240002546516",
                    name: "12312312312313123	"
                },
                {
                    checks: "",
                    number: "1911290006883258",
                    name: "对账人民币经销供应商	"
                },
                {
                    checks: "",
                    number: "1911290006873624",
                    name: "对账美元经销供应商	"
                },
                {
                    checks: "",
                    number: "1911290006873624",
                    name: "对账美元经销供应商	"
                },
                {
                    checks: "",
                    number: "1910260000105369",
                    name: "wuxiancai222	"
                }
            ]
        };
    },
    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
        this.findPage();
    },
    methods: {
        //1.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            this_.tableData1 = [];
            this_.tableData2 = [];
            this_.tableData3 = [];
            this_.tableData4 = [];
            this_.tableData5 = [];
            this_.tableData6 = [];
            this_.tableData7 = [];
            this_.tableData8 = [];

            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }

            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findPurchaseOrderListPage(
                this_.searchFilters,
                function (res) {
                    if (res.code === "0000") {
                        this_.tableData = res.data.rows;
                        let rows = res.data.rows;
                        //数据分类
                        for (var i = 0; i < rows.length; i++) {
                            if (rows[i].status == 0) {
                                this_.tableData1.push(rows[i]);
                            } else if (rows[i].status == 1) {
                                this_.tableData2.push(rows[i]);
                            } else if (rows[i].status == 2) {
                                this_.tableData3.push(rows[i]);
                            } else if (rows[i].status == 3) {
                                this_.tableData4.push(rows[i]);
                            } else if (rows[i].status == 4) {
                                this_.tableData5.push(rows[i]);
                            } else if (rows[i].status == 5) {
                                this_.tableData6.push(rows[i]);
                            } else if (rows[i].status == 6) {
                                this_.tableData7.push(rows[i]);
                            }
                        }
                        this_.totalSize = Number(res.data.total);
                    } else {
                        this_.tableData = [];
                        this_.totalSize = 0;
                    }
                }
            );
        },

        print: function () {
            this.$message({
                message: "打印成功",
                type: "success"
            });
        },

        //下载按钮
        downOd() {
            this.$message({
                message: "下载成功",
                type: "success"
            });
        },
        //导入
        importOd() {
            this.$message({
                message: "导入成功",
                type: "success"
            });
        },
        //店铺table
        showStore() {
            this.showModel = true;
            this.showTable = true;
        },
        showWarehouse() {
            this.showModel1 = true;
            this.showTable1 = true;
        },

        //商家table
        showShops() {
            this.shopsModel = true;
            this.shopsTable = true;
        },
        //取消按钮
        cancels: function () {
            this.showModel = false;
            this.showTable = false;
        },
        //取消按钮
        cancels1: function () {
            this.showModel1 = false;
            this.showTable1 = false;
        },
        //取消按钮
        cancels2: function () {
            this.shopsModel = false;
            this.shopsTable = false;
        },
        //导出按钮
        exInfo: function () {
            this.$message({
                message: "导出成功",
                type: "success"
            });
        },
        //创建退货单
        addOrder: function () {
            this.$router.push("/PurchaseOrderDetail");
        },
        //临时方法
        recive(params) {
            //跳转采购单详情页面 只有实际收货数量可以编辑
            console.log(params);
            this.$router.push({
                path: "/getPurchaseOrderDetail/" + params.id + "/2"
            });
        },
        //临时方法
        send(params) {
            //跳转采购单详情页面 只有实际发货数量可以编辑
            this.$router.push({
                path: "/getPurchaseOrderDetail/" + params.id + "/1"
            });
        },
        //查询条件重置
        resetSearchFilters() {
            this.searchFilters.deptName = null;
            this.searchFilters.storeName = null;
            this.searchFilters.supplierName = null;
            this.searchFilters.code = null;
            this.searchFilters.transactionCurrency = null;
            this.searchFilters.receiveMethod = null;
            this.findPage(null);
        }
    },
    watch: {
        activeNames(val) {
            this.$router.push(`${this.$route.path}?tab=${val}`);
        }
    },
    created() {
        // init the default selected tab
        const tab = this.$route.query.tab;
        if (tab) {
            this.activeNames = tab;
        }
        var userName = localStorage.getItem("userName");
        if (userName == "admin") {
            this.buttonFlag = true;
        } else {
            this.buttonFlag = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 15px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 20px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.page-container {
    padding: 20px 40px 20px;
}

.el-tabs__header {
    margin: 0 0 20px;
}

.mb20 {
    margin-bottom: 20px;
    border-bottom: none;
}

.el-tabs__header {
    margin: 0 0 20px !important;
}
</style>
